<template>
<div>
    <div class="top-div">
        <el-row>
            <el-col :span="2" >
                <el-button @click="$router.go(-1)" icon="el-icon-arrow-left">返 回</el-button>
            </el-col>
            <el-col :push="20" :span="2">
                <el-button icon="el-icon-position" @click="saveAuth"  type="primary">保 存</el-button>
            </el-col>
        </el-row>
    </div>
    <div>
        <el-table
                :data="tableData" border
                style="width: 100% ;height: calc( 100vh - 210px )">
            <el-table-column
                    prop="name"
                    label="菜单"
                    width="300">
            </el-table-column>
            <el-table-column
                    label="权限" >
                <template slot-scope="scope">
                    <el-checkbox-group @change="handleChange(scope.row)" v-model="checkList">
                        <el-checkbox  v-for="item in scope.row.children" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</template>

<script>
    import modelsApi from "../../api/modelsApi";
    import roleAndModelApi from "../../api/roleAndModelApi";

    export default {
        name: "setAuth",
        data() {
            return {
                tableData: [],
                checkList:[],
                parentId:[],
                roleId:""
            }
        },
        methods:{
            handleChange(data){
                console.log(data)
            },
            saveAuth(){
                roleAndModelApi.save({
                    modelId:this.checkList.toString(),
                    roleId:this.roleId
                }).then(res=>{
                    this.$router.go(-1)
                })
            }
        },
        mounted() {
            modelsApi.list().then(res=>{
                this.tableData=res.data;
            })
            this.roleId= this.$route.query.roleId;
            roleAndModelApi.getAuth(this.roleId).then(res=>{
                this.checkList=res.data
            })
        }
    }
</script>

<style scoped>

</style>